<!--  -->
<template>
  <div>
    <div class="showContainer">
      <div class="left">
        <Menu :open-names="[menus[0].name]" active-name="1-0" accordion @on-select="SelectItem">
          <Submenu v-for="(item,index) in menus" :key="index" :name="item.name">
            <template slot="title">
              <Icon type="ios-paper" />
              {{item.title}}
            </template>
            <MenuItem
              v-for="(mitem,mindex) in item.menuitem"
              :key="mindex"
              :name="item.name+'-'+mindex"
            >{{mitem.title}}</MenuItem>
          </Submenu>
        </Menu>
      </div>
      <div class="right">
        <slot name="operation"></slot>
        <br />
        <Table :columns="columns" :data="tabledata"></Table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {};
  },
  props: {
    columns: Array,
    tabledata: Array,
    menus: Array
  },
  watch: {},
  methods: {
    SelectItem(val) {
      // console.log(val);
      this.$emit("GetTableId", val);
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {}
};
</script>
<style scoped>
/* @import url(); 引入css类 */
.showContainer {
  width: 100%;
  height: 100vh;
  display: flex;
}
.showContainer .left {
  width: 240px;
}
.showContainer .right {
  flex: 1;
  padding: 20px;
  text-align: left;
}
</style>